<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const props = defineProps(['name'])
const option =  ref({
  color:['#2B5AED'],
  grid: {
    top: '4%',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    }
  ]
})
onMounted(() => {
  const myChart = echarts.init(document.getElementById('charts_' + props.name))
  myChart.setOption(option.value)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<template>
  <div :id="'charts_' + props.name" style="width: 100%;height: 100%;"></div>
</template>

<style scoped lang='less'>
</style>